<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>生命周期总结</title>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>

<body>
    <!-- 
      VM生命周期：
        
        将要创建            调用beforeCreate函数
            此时：无法通过vm访问data中的数据,methods中的方法。 初始化：生命周期，事件，但数据代理未开始。

        创建完毕            调用Created函数
            此时：可以通过vm访问到data中的数据，methods中配置的方法。  初始化：数据监测，数据代理。

        将要挂载            调用beforeMount函数                 
            此时：页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。

(重要)      挂载完毕            调用Mounted函数   =============》              重要的钩子
             一：页面中呈现的是经过Vue编译的DOM。
             二：对DOM的操作均有效(尽可能避免)，至此初始化过程结束，一般在此进行：开启定时器，
             发送网络请求，订阅消息，绑定自定义事件，等初始化操作。

        将要更新            调用beforeUpdate函数
            此时：数据是新的，但页面是旧的，即：页面尚未和数据保持同步。

        更新完毕            调用updated函数
            此时：数据是新的，页面也是新的，即：页面和数据保持同步。

(重要)  将要销毁            调用beforeDestroy函数      =============》         重要的钩子
            此时：vm中所有的 data,methods，指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段
            关闭定时器，取消订阅，解绑自定义事件等收尾工作。

        销毁完毕            调用destroyed函数

        常用的生命周期钩子
            一：mounted，发送ajax请求，启动定时器，绑定自定义事件，订阅消息等初始化操作。
            二：beforeDestroy：清楚定时器，解绑自定义事件，取消订阅消息等收尾工作。
        关于销毁Vue实例
            一：销毁后借助Vue开发者工具看不到任何消息
            二：销毁后自定义事件会失效，但原生DOM事件依然生效。
            三：一般不会在beforeDestroy操作数据，因为即便操作数据，也不会触发更新流程了.
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <!--         <h2>当前n的值是:{{n}}</h2><br /><br />
        <button @click="add">点我n+1</button> <br /><br />
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <button @click="bye">点击我销毁</button> -->
    </div>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示 

    const vm = new Vue({
        el: '#root',
        template: `
            <div>
                <h2>当前n的值是:{{n}}</h2><br /><br />
                <button @click="add">点我n+1</button> <br /><br />
                <h2 :style="{opacity}">欢迎学习Vue</h2> <br /><br />
                <button @click="bye">点击我停止变化</button>
            </div>
        `,
        data: {
            name: '徐亚远',
            n: 1,
            opacity: 1,
        },
        methods: {
            add() {
                this.n++;
            },
            bye() {
                this.$destroy()
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        // Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕) 调用mounted
        mounted() {
            console.log('mounted', this)
            this.timer = setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) {
                    this.opacity = 1
                }
            }, 16)
        },
        beforeUpdate() {
            console.log('mounted', this)
            console.log('n', this.n)
        },
        updated() {
            console.log('updated', this)
            console.log('n', this.n)
        },
        beforeDestroy() {
            console.log('beforeDestroy', this)
            console.log('n', this.n)
            console.log('timer', this.timer)
            clearInterval(this.timer)
            console.log('定时器销毁')
        },
        destroyed() {
            console.log('destroyed', this)
        }

    })
</script>

</html>